import * as echarts from 'echarts';
import React, {useEffect, useRef} from "react";

interface Props {
    xData?: Array<string>,
    yData?: Array<number>,
    height?: number
}

const LineEcharts = React.memo( ({xData = ["1", "2", "3", "4", "5", "6", "7", "8"], yData = [3, 2, 3, 4, 2, 3, 3, 5], height = 100}: Props) => {

    const option = {
        grid:{
            top:0,
            bottom:"10px"
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData,
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        // dataZoom: {
        //     type: 'inside',
        //     show: false,
        //     // 设置组件控制的y轴
        //     yAxisIndex: [0],
        //     // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
        //     // 也可以用 startValue设置起始值
        //     start: 100,
        //     end:10,
        //     preventDefaultMouseMove: false,
        // },

        series: [
            {
                data: yData,
                type: 'line',
                areaStyle: {
                    color: '#1890ff'
                },
                showSymbol: false,
                smooth: true,
                lineStyle: {
                    color: "#1890ff",
                    width: 0
                }
            }
        ]
    };

    const echartsEle = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
        if (echartsEle.current) {
            const myChart = echarts.init(echartsEle.current as HTMLDivElement);
            option && myChart.setOption(option)
        }
    }, [xData, yData])

    return (
        <div id='line-echarts' ref={echartsEle} style={{width: "100%", height: `${height}px`}}>
        </div>
    )
})

export default LineEcharts